<template>
    <el-row :gutter="20" class="mt-5">
        <template v-if="loading">
            <el-col :span="3" :offset="0" v-for="i in 8" :key="i">
                  <el-skeleton  :loading="loading" animated>
                    <template #template>
                        <el-card shadow="always">
                            <div class="flex flex-col items-center justify-center cursor-pointer">
                                <el-skeleton-item variant="text" style="width: 30%;height: 25px;" />
                                <el-skeleton-item variant="text"  style="width: 30%;height: 25px;" class="mt-2"/>
                            </div>
                        </el-card>
                    </template>
                </el-skeleton>
             </el-col>
        </template>    
        <el-col v-else :span="3" :offset="0" v-for="(item,index) in iconNavs" :key="index">
            <el-card shadow="hover" :body-style="{ padding: '15px' }" @click="router.push(item.path)">
                <div class="flex flex-col items-center justify-center cursor-pointer">
                    <el-icon :size="25" :class="item.color">
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span class="text-sm mt-2 font-bold text-blue-gray-600">{{item.title}}</span>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>
    import {reactive,ref} from 'vue'
    import {router} from '@/router'
    var loading =ref(true);


    setTimeout(()=>{
        loading.value = false;
    },600)

    const iconNavs = reactive([{
        icon:"user",
        color:"text-purple-500",
        path:"/user/list",
        title:"分类"
    },{
        icon:"shopping-cart",
        color:"text-violet-500",
        path:"/product/list",
        title:"商品"
    },{
        icon:"tickets",
        color:"text-fuchsia-500",
        path:"/user/list",
        title:"分类"
    },{
        icon:"chat-dot-square",
        color:"text-purple-500",
        path:"/user/list",
        title:"评价"
    },{
        icon:"picture",
        color:"text-red-500",
        path:"/user/list",
        title:"图库"
    },{
        icon:"bell",
        color:"text-green-500",
        path:"/user/list",
        title:"公告"
    },{
        icon:"set-up",
        color:"text-purple-500",
        path:"/user/list",
        title:"安装"
    },{
        icon:"files",
        color:"text-purple-500",
        path:"/user/list",
        title:"优惠券"
    }]);

</script>